<template>
	<view style='background-color: #f3f3f3;height:100vh;'>
		<view class="full-image-view" >
			<view @click='toSetting' style="padding: 8vh 10px 10px 10px; display: flex; align-items: center;">
				<u-avatar :src="avatarUrl" size="80"></u-avatar>
				<view class='name'>
				{{nickname}}
				<view class='level'>{{level}}</view>
				</view>
			</view>
			<view style='position: absolute;right: 10px;top:10px;'>
				<u-icon name="share-square" size='32' color='#fff' @click='toUrl("/pages/mine/qrcode")'></u-icon>
			</view>
		</view>
		<view class="content">
		      <!-- 使用 uView 的 Row/Col 组件实现左右布局 -->
		      <u-row gutter="16" class="balance-container">
		        <!-- 左侧余额 -->
		        <u-col span="6">
		          <view class="balance-card"  @click='toUrl(`/pages/wallet/index`)'>
		            <view class="label">可提现余额</view>
		            <view class="value">¥ {{ amount }}</view>
		            <!-- <view class="hint">点击查看明细</view> -->
		          </view>
		        </u-col>
		        
		        <!-- 右侧积分 -->
		        <u-col span="6">
		          <view class="points-card" @click="toUrl('/pages/mine/balance-log?type=point')">
		            <view class="label">平台消费券</view>
		            <view class="value">{{ balance }}</view>
		            <!-- <view class="hint">点击查看详情</view> -->
		          </view>
		        </u-col>
		      </u-row>
		    </view>
		<view style='margin-top:20px'>
			<u-cell-group>
				<u-cell icon="gift" title="礼品定制" :isLink='true'  @click='toUrl(`/pages/product/gift`)'></u-cell>
				<u-cell icon="order" title="我的订单" :isLink='true' @click='toUrl(`/pages/mine/orders`)'></u-cell>
				<u-cell icon="coupon" title="我的兑换券" :isLink='true' @click='toUrl(`/pages/mine/coupon`)'></u-cell>
				<u-cell v-if='isReview == false' icon="grid-fill" title="我的仓储" :isLink='true'  @click='toUrl(`/pages/mine/warehouse`)'></u-cell>
				<u-cell icon="account" title="个人信息" :isLink='true'  @click='toUrl(`/pages/mine/setting`)'></u-cell>
				<u-cell v-if='isReview == false' icon="rmb-circle" title="我的钱包" :isLink='true'  @click='toUrl(`/pages/wallet/index`)'></u-cell>
				<u-cell icon="tags" title="积分商城" :isLink='true'  @click='toUrl(`/pages/product/point-products`)'></u-cell>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
						name: 'order',
						title: '我的订单'
					},
					{
						name: 'heart-fill',
						title: '我的收藏'
					},
					{
						name: 'coupon-fill',
						title: '优惠券'
					}
				],
				nickname: '微信用户',
				avatarUrl: '/static/logo.jpg',
				level: '新手种植员',
				amount: 0.00,
				balance: 0.00,
				isReview: true
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.request.get(`api/options/IS_REVIEW`).then((res) => {
				console.log(res.data)
				this.isReview = res.data.value
			})
			this.request.get(`api/user`, {
				'@expands': "['profile']"
			}).then((res) => {
				if (res.data.profile.__metadata.nickname) {
					this.nickname = res.data.profile.__metadata.nickname
				}
				if (res.data.profile.__metadata.avatarUrl) {
					this.avatarUrl = res.data.profile.__metadata.avatarUrl
				}
			})
			this.request.get(`api/balances`).then((res) => {
				this.balance = res.data.amount
			})
			this.request.get(`api/huifu-accounts`).then((res) => {
				if(res.data.length > 0){
					this.request.get(`api/huifu-accounts/${res.data[0].id}/balance`).then((res) => {
						console.log('huifuBalance',res.data)
						this.amount = res.data[0].balance_amt
					})
				}
			})
		},
		methods: {
			toSetting() {
				uni.navigateTo({
					url: '/pages/mine/setting'
				})
			},
			toUrl(page){
				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>

<style lang="scss">
	.full-image-view {
		width: 100vw;
		height: calc(100vw * 1.5 / 3);
		background: linear-gradient(90deg, #262f27, #ffd591);
	}

	.name {
		color: #fff;
		font-size: 23px;
		margin-left: 10px;
		text-shadow: 0 0 1px #999, 0 0 2px #999;
	}

	.point {
		margin: -80px 10px 10px 10px;
		background-color: #fff;
		border-radius: 20px;
		padding: 20px 10px;
	}

	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	
	.level{
		font-size: 16px;
	}
	
	.container {
	  background-color: #f5f7fa;
	  min-height: 100vh;
	}
	
	.content {
	  padding: 20rpx;
	}
	
	.balance-container {
	  margin-top: 30rpx;
	}
	
	.balance-card, .points-card {
	  border-radius: 16rpx;
	  padding: 40rpx 30rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	  
	  .label {
	    font-size: 28rpx;
	    color: #606266;
	    margin-bottom: 15rpx;
	  }
	  
	  .value {
	    font-size: 48rpx;
	    font-weight: bold;
	    margin-bottom: 20rpx;
	  }
	  
	  .hint {
	    font-size: 24rpx;
	    color: #909399;
	  }
	}
	
	.balance-card {
	  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	  color: #fff;
	  
	  .label, .hint {
	    color: rgba(255, 255, 255, 0.9);
	  }
	}
	
	.points-card {
	  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	  color: #fff;
	  
	  .label, .hint {
	    color: rgba(255, 255, 255, 0.9);
	  }
	}
</style>